<template>
  <div class="center-order">
    <h1 class="title border-bottom-1px">
      <span class="text">我的订单</span>
      <span class="more" @click="$router.push('/service/order/0')">查看全部订单<i class="cubeic-arrow"></i></span>
    </h1>
    <ul class="menu">
      <li
        v-for="(item, index) in menuList"
        :key="index"
        @click="clickMenu(item.url)"
      >
        <span class="icon">
          <img :src="'/order-image/' + item.image + '.png'" />
        </span>
        <span class="text">{{ item.text }}</span>
        <span class="count" v-if="+count[item.image] > 0">{{ count[item.image] }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'CenterOrder',
  props: ['count'],
  data() {
    return {
      menuList: [
        { image: 'non_payment', text: '待付款', url: '2' },
        { image: 'paid', text: '待发货', url: '3' },
        { image: 'wait_receiving', text: '待收货', url: '4' },
        { image: 'received', text: '待评价', url: '5' },
        { image: 'service', text: '售后', url: '6' },
      ]
    }
  },
  methods: {
    clickMenu(url) {
      if (url.length >= 1) {
        this.$router.push(`/service/order/${url}`)
      }
    }
  }
}
</script>

<style scoped lang="stylus">
.center-order
  margin 10px
  background white
  border-radius 5px
  .title
    height 45px
    line-height 45px
    padding 0 10px
    display flex
    justify-content space-between
    .text
      font-weight 700
      font-size 14px
    .more
      color $shallow
  .menu
    display flex
    justify-content space-around
    padding 15px 0
    li
      position relative
    li > span
      display block
      &.icon
        display flex
        align-items center
        height 30px
        padding 10px
        width 30px
        img
          width auto
          height auto
          max-width 100%
          max-height 100%

      &.text
        //margin-top 5px
        margin-top 0
      &.count
        position absolute
        top 0
        right 0
        //background white
        color white
        background $main_color
        width 25px
        height 25px
        line-height 25px
        overflow hidden
        border-radius 50%
        opacity 0.85
</style>
